import React, { useState, useEffect, useLayoutEffect,useInsertionEffect } from "react";

export default function Index() {

  const [count, setCount] = useState(0);

  function changeCount() {
    // 2、修改状态：
    setCount(count + 1);
    console.log("count", count);
  }

  useInsertionEffect(()=>{
    console.log("useInsertionEffect");
     const style = document.createElement('style')
    style.innerHTML = '.box { color: red }'
    document.head.appendChild(style)
  })

  useLayoutEffect(()=>{
    console.log("useLayoutEffect");
  })
  

  useEffect(()=>{
    console.log("useEffect");
  })


  return (
    <div>
      <h1>useInsertionEffectDemo</h1>
      <p>count:{count}</p>
      <input type="button" value="修改count" onClick={changeCount} />     
      <div className="box">
        红盒子
      </div>
    </div>
  );
}
